<template>
  <view class="body">
    <view class="title">
      <text class="title_text">血压变化情况</text>
    </view>
    <view class="unit">单位: mmHg</view>
    <view>
      <view class="echart">
        <qiun-data-charts :canvas2d="true" canvasId="sbp" type="line" :opts="opts" :chartData="chartData" />
      </view>
    </view>
    <view class="xtitle">
      <text v-for="(item, index) of xTitles" :key="index" class="xtext" >{{ item }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import qiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
import { ref, onMounted, watch } from 'vue'
import { signsInfoPage } from '@/api/body'
import { formatDate } from '@/utils/util'
import { deepCopy } from '@/utils/tools'

let chart = ref()
const tab = ref('')
const xTitles = ref([])

const props = defineProps({
  empi: String,
  chartInfo: {
    type: Object,
    default: () => {}
  }
})

const opts = {
  color: ['#5C8EFF', '#FF813C'],
  padding: [20, 30, 10, 0],
  enableScroll: false,
  legend: {
    show: false,
  },
  xAxis: {
    disableGrid: true,
    disabled: true,
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    data: [
      {
        min: 0,
        max: 300
      }
    ]
  },
  extra: {
    line: {
      type: 'straight',
      width: 2,
      activeType: 'hollow',
    },
    markLine: {
      type: 'dash',
      dashLength: 8,
      data: [
        {
          value: 60,
          lineColor: '#5C8EFF',
          showLabel: true,
          labelAlign: 'right',
          labelPadding: 1,
          labelBgOpacity: 0,
          labelOffsetY: 20,
          labelBgColor: '#fff',
          labelFontSize: 12,
        },
        {
          value: 89,
          lineColor: '#5C8EFF',
          showLabel: true,
          labelAlign: 'right',
          labelPadding: 1,
          labelBgOpacity: 0,
          labelOffsetY: 20,
          labelBgColor: '#fff',
          labelFontSize: 12,
        },
        {
          value: 90,
          lineColor: '#FF813C',
          showLabel: true,
          labelAlign: 'right',
          labelPadding: 1,
          labelBgOpacity: 0,
          labelOffsetY: -20,
          labelBgColor: '#fff',
          labelFontSize: 12,
        },
        {
          value: 139,
          lineColor: '#FF813C',
          showLabel: true,
          labelAlign: 'right',
          labelPadding: 1,
          labelBgOpacity: 0,
          labelOffsetY: -20,
          labelBgColor: '#fff',
          labelFontSize: 12,
        }
      ]
    },
  }
}

const chartData = ref();
const chart_data = ref();

watch(
  () => chart_data.value,
  (n, o) => {
    if (!o || JSON.stringify(n) !== JSON.stringify(o)) {
      chartData.value = deepCopy(n)
    }
  }
)

onMounted(() => {
  getData('sbp', '收缩压')
})

const getData = (item: string, name: string) => {
  let params = {
    page: 1,
    limit: 5,
    empi: props.empi, // props.empi
    itemList: [item]
  }
  signsInfoPage(params).then((res) => {
    const categories = []
    const series = []
    const data = []
    const data2 = []
    if (res.data && res.data.list.length > 0) {
      res.data.list.map((v) => {
        v[item] = v[item].toFixed(1)
        data.unshift(v[item])
        data2.unshift(v['dbp'])
        categories.unshift(formatDate(v.collectTime, 'MM-dd'))
        xTitles.value.unshift(formatDate(v.collectTime, 'MM-dd\nhh:mm'))
      })
    }
    series.push({
      name: name,
      data: data
    })
    series.push({
      name: name,
      data: data2
    })
    chart_data.value = {
      categories: categories,
      series: series
    }
  })
}

</script>

<style lang="scss" scoped>
.body {
  padding: 32rpx;
  margin-bottom: 32rpx;
  background: #ffffff;
  border-radius: 12rpx;
  .echart {
    width: 100%;
    height: 360rpx !important;
  }
  .title {
    height: 62rpx;
    display: flex;
    align-items: flex-start;
    gap: 16rpx;
    border-bottom: 1px solid #e5e6eb;
    .img_logo {
      width: 32rpx;
      height: 32rpx;
      transform: translateY(6rpx);
    }
    .title_text {
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
    }
  }
  .unit {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    margin: 20rpx 0;
  }
  .xtitle {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-left: 50rpx;
    .xtext {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }
  }
}
</style>
